<template>
  <div class="statistics-customer">
    <e-charts :loading="chartLoading" :options="companyObj" class="company bg mb15 p10 bsb" height="400px"></e-charts>
    <div class="table bg p20">
      <gl-table :data="data" :columns="columns"></gl-table>
      <!--<gl-pagination :total="total" :curr="curr" :size="limits" @callback="paginationChange"></gl-pagination>-->
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "StatisticsCustomer",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        company: [],
        chartLoading: true,
        companyObj: {},
        data: [],

        columns: [
          {label: '属性名称', prop: 'name'},
          {label: '客户数量', prop: 'customer_num'},
          {label: '占比', prop: 'ratio'},
          {label: '关联产品', prop: 'product_num'},
          {label: '关联订单', prop: 'order_num'},
          {label: '订单总金额', prop: 'total_price'},
        ],
        total: 0,
        curr: 1,
        limits: 10,
      }
    },
    watch: {
      company(val) {
        let selected = {};
        let data = val.map((e, i) => {
          selected[e.name] = !!parseFloat(e.customer_num);
          return {
            value: parseFloat(e.customer_num),
            name: e.name,
          };
        }).filter(e => e.value);
        this.companyObj = {
          title: {
            text: '客户分类统计',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            icon: 'circle',
            bottom: 10,
            selected,
            data: data.map(e => e.name),
          },
          series: [
            {
              // name: '客户分类统计',
              type: 'pie',
              radius: '75%',
              center: ['50%', '50%'],
              data,
            }
          ]
        };
        this.chartLoading = false;
      },
    },
    created() {

    },
    mounted() {
      this.getInfo(1);
    },
    methods: {
      paginationChange({curr, size}) {
        this.curr = curr;
        this.limits = size;
        this.getInfo();
      },
      getInfo(init) {
        if (init) {
          this.curr = 1;
        }
        this.chartLoading = true;
        this.http.$post('admin/customer.Api/customer_class_list', {
          // curr: this.curr,
          // limits: this.limits,
          company_id: this.userInfo.company_id,
        }, {loading: true}).then(res => {
          // console.log(res);
          this.data = res || [];
          this.company = res || [];
          // this.total = res;
        }).catch(e => {
          this.$err(e);
          this.chartLoading = false;
        });
      },


    },
  }
</script>

<style scoped lang="less">
  .bg {
    background-color: #fff;
    border-radius: 5px;
  }

</style>